<script setup lang="ts">
import { ref } from 'vue';
const courseName=ref('演员的自我修养')//课程名称
const evaluateValue = ref(3) //评分
const otherMesg=ref('')//其他想法
const tagsArray=[

]//标签集合
const onSubmit = (values: any) => {
    console.log('submit', values);
};
</script>
<template>
    <van-image width="100%" height="30%" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
    <div class="container">
        <van-row>
            <van-col><span>小王</span> 同学：</van-col>
        </van-row>
        <van-row>
            <span class="tips">你好，感谢百忙之中抽空参与本次评价课程，这不会需要多长时间。谢谢你的配合和理解！</span>
        </van-row>
        <van-form @submit="onSubmit">
            <van-cell-group inset>
                <van-field label="课程名称" :model-value="courseName" readonly />
                <van-field name="rate" label="本次评价">
                    <template #input>
                        <van-rate v-model="evaluateValue" />
                    </template>
                </van-field>
                <van-cell>
                   <template #title>
                    <van-tag round type="primary" plain class="tag">老师互动很好，容易激发学习兴趣</van-tag>
                    <van-tag round type="primary" plain class="tag">组织能力强！</van-tag>
                    <van-tag round type="primary" plain class="tag">喜欢老师</van-tag>
                    <van-tag round type="primary" plain class="tag">专业</van-tag>
                    <van-tag round type="primary" plain class="tag">耐心</van-tag>
                   </template>
                </van-cell>
                <van-field v-model="otherMesg" label="其他想法" type="textarea" placeholder="请输入其他想说的" />
            </van-cell-group>
            <div style="margin: 16px;">
                <van-button block type="primary" native-type="submit" plain>
                    提交
                </van-button>
            </div>
        </van-form>
    </div>
</template>

<style scoped lang="scss">
.container {
    padding: 10px 10px;
    background-color: #fff;
    padding-bottom: 40px;
    .tips {
        text-indent: 2em;
        margin-bottom: 10px;
        font-size: 16px;
        color: #888888;
    }
    .tag {
        margin-right: 5px;
        color: #999999;
    }
}
</style>